<template>
  <div class="home">
    <div style="width: 1200px;margin:0 auto">
       <Login></Login>
       <filter-house @changeFilter="changeFilter"></filter-house>
       <filter-list :list="list" ></filter-list>
       <Pagination :page="page" @changePage="changePage"></Pagination>
    </div>
  </div>
</template>

<script>
import { defineComponent ,computed, reactive, toRefs,onMounted  } from 'vue';
import FilterHouse from '@/components/filterHouse/index.vue'
import FilterList from '@/components/filterHouse/list.vue'
import Pagination from '@/components/pagination/index.vue'
import Login from '@/components/login/index.vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Home',
  components: {
    FilterHouse,FilterList,Pagination,Login
  },
  setup() {
    const store = useStore() ;
    const isLogin = computed(() => store.state.isLogin)
    const data = reactive({
      page: {
        pageSize: 5,
        total: 100
      },
      form: {
        pageSize: 5,
        page: 1,
        house_title: "",
      },
      list: []
    })
    
    const handlerLogin = (bol,type) => {
      store.commit('handlerLogin',bol,type)
    }
    const changePage = (num) => {
      data.form.page = num
      getList()
      backtop()
    }
    const getList = (params = {})=> {
      store.dispatch("home/houseList",{...data.form , ...params} ).then((res) => {
        let arr = res.data;
        arr.forEach((item) => {
          item.house_banner = item.house_banner && item.house_banner.split(",");
          item.keywords = item.keywords && item.keywords.split(",");
          item.item_pro = item.item_pro && item.item_pro.split(",");
          item.keywords =
            item.keywords && item.keywords.length && item.keywords.slice(0, 2);
        });
        data.page.total = res.last_page
        data.list = arr;
      });
    }
  
    const changeFilter = ( params ) => {
      getList(params)
    }

    const backtop = ()=>{
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    }
    onMounted(() => {
      // setUserList("login");
      getList()
    });
    return {
      ...toRefs(data),
      handlerLogin,changePage,backtop,changeFilter,isLogin
    }
  }
});
</script>
